<template>
    <div>
        <el-table
            :data="tableList"
            style="width: 96%"
            border
            @selection-change="handleSelectionChange"
            :cell-style="cellStyle"
            :header-cell-style="cellStyle"
            v-loading="loading"
        >
            <slot></slot>
        </el-table>
        <div class="pagination">
            <el-pagination
                v-if="total"
                layout="prev, pager, next,total"
                :total="total"
                :page-size="pageSize"
                @current-change="getData"
                :current-page.sync="listCurrentPage"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        getList: {
            default: (page, fn) => {},
        },
        pageSize: {
            default: 10,
        },
    },
    data() {
        return {
            loading: false,
            listCurrentPage: 1,
            tableList: [],
            total: 0,
            cellStyle: {
                textAlign: "center",
            },
        }
    },
    methods: {
        getData(value) {
            this.loading = true
            //value 默认为当前点击页   当为false时 为删除时操作  当前页只有一条数据时删除后将页码提前一页防止空页
            if (value == "false" && this.tableList.length == 1 && this.listCurrentPage > 1) {
                this.listCurrentPage -= 1
            }
            this.getList(this.listCurrentPage, this.callBackFn)
        },
        defaultPage() {
            //页码重置为第一页
            this.loading = true
            this.listCurrentPage = 1
            this.getList(1, this.callBackFn)
        },
        callBackFn(value) {
            this.tableList = value.data || value
            this.total = value.total || 0
            this.loading = false
        },
        handleSelectionChange(val) {
            this.$emit("handleSelectionChange", val)
        },
    },
}
</script>
<style lang="scss"></style>
